<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
    <!--以下是兼容IE8高速渲染模式和360的高速模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 搜索引擎 方便爬虫扒-->
    <meta name="author" content="公司名称">
    <meta name="keywords" content="关键词，天猫，超市，购物">
    <meta name="description" content="jerehedu">
    <title>《炉石传说》官方网站_暴雪首款免费休闲卡牌网游</title>

    <link rel="icon" href="http://hearthstone.nos.netease.com/3/common/hs.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="http://hearthstone.nos.netease.com/3/common/hs.ico" type="image/x-icon"/>


    <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" href="../css/landing.css"/>
</head>
<body>
    <div class="header-top">
        <div class="wrap">
            <div class="header">
                <div id="logo">
                    <img class="flip" src="../img/logo2.png">
                    <img src="../img/logo1.png" class="flip out">
                </div>
            </div>
        </div>
        <video id="banner" autoplay="autoplay" loop="true" preload="auto">
            <source src="../vedio/vedio_rain.mp4" type="video/mp4">
        </video>
    </div>
    <div class="content">
        <div class="wrap">
            <div class="landing-nav">
                <a href="javacsript:;" class="videoPlayerBtn"></a>
                <div id="nav">
                    <a href="account.html" class="left-icon icon"></a>
                    <span class="centerIcon"></span>
                    <a href="home.html" class="right-icon icon"></a>
                    <a href="http://hs.blizzard.cn/download" target="_blank" class="download">
                        <span>客户端下载</span>
                    </a>
                </div>
            </div>
            <span class="gun-shut"></span>
        </div>
    </div>
    <div id="box" class="box-change clearFix">
        <ul>
            <li>
                <a href="##">
                    <div class="bck">
                        <img src="../img/1111.png" alt="img"/>
                    </div>
                    <p class="btn">现已登录手机移动平台</p>
                </a>
            </li>
            <li>
                <a href="##">
                    <div class="bck">
                        <img src="../img/2222.png" alt="img"/>
                    </div>
                    <p class="btn">最新扩展包即将上线</p>
                </a>
            </li>
            <li>
                <a href="##">
                    <div class="bck">
                        <img src="../img/3333.png" alt="img"/>
                    </div>
                    <p class="btn">选世锦赛冠军赢免费卡包</p>
                </a>
            </li>
        </ul>
    </div>
    <!--这是指南针-->
    <div class="pointer-icon clearFix">
        <span></span>
    </div>
    <div id="footer">
        <div class="footer">
            <div class="wrap">
                <div class="footer-top clearFix">
                    <div class="footer-top-left clearFix">
                        <a href="##">
                            <span style="background-position:-2px -3px; "></span>
                            <b>在线客服</b>
                        </a>
                        <a href="##">
                            <span style="background-position:-32px -3px; "></span>
                            <b>反馈</b>
                        </a>
                        <a href="##">
                            <span style="background-position:-2px -29px; "></span>
                            <b>加入我们</b>
                        </a>
                    </div>
                    <div class="footer-top-right">
                        <span style="padding-left: 10px;">合作品牌:</span>
                        <a href="##" class="nvidia" style="background: url('../img/logo.png');background-position:-352px 0;"></a>
                        <a href="mailto:business@battlenet.com.cn" class="mail" >
                            <i class="line-h"></i>
                            <i class="line-s"></i>
                        </a>
                        <span style="padding: 0 10px;font-style: normal;">合作媒体</span>
                        <a class="icon-more">
                            <i class="triangle"></i>
                        </a>
                    </div>
                </div>
                <div class="footer-bottom clearFix">
                    <div class="footer-bottom-left">
                        <a href="http://blizzard.com/" class="logo-z"></a>
                        <a href="http://www.163.com/" class="logo-w"></a>
                    </div>
                    <div class="footer-bottom-right">
                        <p class="API">
                            <a href="##">隐私</a>|
                            <a href="##">法律条款</a>|
                            <a href="##">API</a>
                        </p>
                        <p>©2016 暴雪娱乐股份有限公司版权所有 由上海网之易网络科技发展有限公司运营 著作权侵权 新出审字[2013]1510号
                            文网进字[2013]029号 沪网文[2014]0731-161号 增值电信业务经营许可证编号：沪B2－20080012
                            互联网违法和不良信息举报电话：0571-28090163 沪公网安备 31011502022167号</p>
                        <div>
                            <a href="http://sh.cyberpolice.cn/infoCategoryListAction.do?act=initjpg"><img src="../img/police.png" alt="logo"/></a>
                            <a href="http://www.zx110.org/"><img src="../img/22.png" alt="logo"/></a>
                            <a href="http://www.sgs.gov.cn/lz/licenseLink.do?method=licenceView&entyId=20111011175417664"><img src="../img/33.png" alt="logo"/></a>
                            <a href="http://www.shjbzx.cn/"><img src="../img/44.png" alt="logo"/></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="popBox" class="clearFix">
        <div class="lightbox-container">
            <span class="top-bar"></span>
            <h1 class="top-wood"></h1>
            <span class="left-top-icon"></span>
            <span class="right-top-icon"></span>
            <span class="left-bottom-icon"></span>
            <span class="right-bottom-icon"></span>


            <span class="left-bar"></span>
            <span class="right-bar"></span>

            <object id="FPlayer" data="http://v.163.com/swf/video/NetEaseFlvPlayerV3.swf" type="application/x-shockwave-flash">
                <param value="transparent" name="wmode">
                <param value="true" name="allowFullScreen">
                <param value="always" name="allowscriptaccess">
                <param value="http://v.163.com/swf/video/NetEaseFlvPlayerV3.swf" allownetworking="all" name="movie">
                <param value="pltype=7&amp;topicid=0031&amp;vid=VC44E4S0A&amp;sid=VAU858JF3&amp;coverpic=http://vimg1.ws.126.net/image/snapshot/2016/11/0/B/VC44E4S0B.jpg&amp;autoplay=true&amp;showend=false&amp;hiddenR=true&amp;noPauAd=1" name="flashvars">
            </object>
            <h1 class="bottom-wood"></h1>
            <span class="bottom-bar"></span>
            <a href="##" id="close-btn"></a>
        </div>
        <div class="box-model"></div>
    </div>
    <!--<ul id="div1">-->
        <!--<li>1</li>-->
        <!--<li id="div2">2</li>-->
        <!--<li>3</li>-->
        <!--<li>4</li>-->
    <!--</ul>-->
</body>
<script>
    $(function(){
       var logo1=$("#logo img");
        setTimeout(function(){
            setTimeout(function(){
                logo1.eq(1).removeClass("out").addClass("in");
            },255);
            logo1.eq(0).removeClass("in").addClass("out");
        },2500);
//        btn.on('click',function(){
//
//            $(this).prev().slideToggle("ease-in")
//        });
        //父代后代选择器的使用，使用parent(),和children()和find()
       // $("#div2").parent().children().eq(0).css({"background":"red"});
        $(".videoPlayerBtn").on('click',function(){
            $("#popBox").show();
        });
        $("#close-btn").on('click',function(){
            $("#popBox").hide();
        });
    });
    $(document).scroll(function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //document.title=(scrollTop);
        if(scrollTop<=100){
            $("#box").removeClass("box").addClass("box-change");
        }else{
            $("#box").removeClass("box-change").addClass("box");
        }
    })
</script>
</html>